<template>
    <xc-table
        id="xc-table"
        :data="tableData"
        :columns="columns"
        :row-config="rowConfig"
        :loading="tableLoading"
        :empty-info="emptyInfo"
    >
        <template v-for="slot in Object.keys($slots)" #[slot]="scope">
            <slot :name="slot" v-bind="scope" />
        </template>
    </xc-table>
    <Pagination
        :page-no="pageInfo.pageNum"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.total"
        @changePage="changePage"
        @changePageSize="changePageSize"
    ></Pagination>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, nextTick, onMounted } from 'vue';
import XcTable from '@x-tech/fe-pc-components/src/components/XcTableTemplate/index.vue';
import Pagination from '@/components/Pagination.vue';
import { setTableMaxHeight } from '@/utils/common';

const emit = defineEmits(['onChangePage']);

const props = defineProps({
    tableData: {
        type: Array,
        default: () => [],
    },
    columns: {
        type: Array,
        default: () => [],
    },
    rowConfig: {
        type: Object,
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        default: () => {},
    },
    height: {
        type: Number,
        default: 0,
    },
    tableLoading: {
        type: Boolean,
        default: false,
    },
    pageInfo: {
        type: Object,
        default: () => {
            return {
                pageNum: 1,
                total: 0,
                pageSize: 10,
            };
        },
    },
    emptyInfo: {
        type: Object,
        default: () => {
            return {
                inline: false,
            };
        },
    },
});

const maxTableHeight = ref(0);

// 分页的页码改变
const changePage = (page: number) => {
    const pageInfo = JSON.parse(JSON.stringify(props.pageInfo));
    pageInfo.pageNum = page;
    emit('onChangePage', pageInfo);
};

// 分页的条数
const changePageSize = (pageSize: number) => {
    const pageInfo = JSON.parse(JSON.stringify(props.pageInfo));
    pageInfo.pageSize = pageSize;
    emit('onChangePage', pageInfo);
};

onMounted(async () => {
    await nextTick();
    maxTableHeight.value = setTableMaxHeight('xc-table', props.height);
});
</script>
